<template>
  <div class="product_type_body">
    <div class="button_div">
      <el-button type="primary" plain icon="el-icon-plus" size="small" @click="handleAdd(null)" v-hasPermi="['cms:jiayi_product_type:add']" style="width: 50%;">添加类型</el-button>
    </div>

    <el-table v-loading="loading" :data="productTypeList" row-key="id" :show-header="false" :default-expand-all="isExpandAll" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" size="mini">
      <el-table-column align="center" width="150">
        <template slot-scope="scope">
          <image-preview v-if="scope.row.parentId == '0'" :src="scope.row.poster" width="2.5rem" height="2.5rem"/>
        </template>
      </el-table-column>
      <el-table-column prop="name" align="center"/>
      <el-table-column align="center" width="128">
        <template slot-scope="scope">
          <el-button-group>
            <el-button type="primary" plain circle icon="el-icon-circle-plus-outline" size="mini" @click="handleAdd(scope.row)"/>
            <el-button type="primary" plain circle icon="el-icon-edit" size="mini" @click="handleUpdate(scope.row)"/>
            <el-button type="primary" plain circle icon="el-icon-delete" size="mini" @click="handleDelete(scope.row)"/>
            <el-button :type="value === scope.row.id ? 'warning' : 'primary'" plain circle icon="el-icon-thumb" size="mini" @click="handleChoiceType(scope.row)"/>
          </el-button-group>

        </template>
      </el-table-column>
    </el-table>


    <!-- 添加或修改产品展示类型对话框 -->
    <el-drawer :title="title" :visible.sync="open" size="30%" direction="ltr" append-to-body destroy-on-close>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="父级编号" prop="parentId">
          <el-cascader v-model="form.parentId" :options="productTypeList" :props="{ checkStrictly: true,value:'id',label: 'name',emitPath: false}" clearable style="width: 90%"/>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入名称" style="width: 50%" clearable/>
        </el-form-item>
        <el-form-item v-if="form.parentId == '0' || form.parentId == null" label="海报图" prop="poster">
          <ImageUpload :value="form.poster" :limit="1" @input="handleUploadPoster"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" :rows="4" style="width: 70%" placeholder="请输入内容"/>
        </el-form-item>
      </el-form>
      <div style="width: 100%;text-align: center">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  listJiayi_product_type,
  getJiayi_product_type,
  delJiayi_product_type,
  addJiayi_product_type,
  updateJiayi_product_type
} from "@/api/cms/jiayi_product_type";
import product from "@/views/jiayi/product.vue";

export default {
  name: "Jiayi_product_type",
  computed: {
    product() {
      return product
    }
  },
  props:{
    value:{
      type: Number,
      default: null
    }
  },
  comments: {

  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 是否展开，默认全部展开
      isExpandAll: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 产品展示类型表格数据
      productTypeList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        name: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        name: [
          { required: true, message: "名称不能为空", trigger: "blur" },
        ],
        poster: [
          { required: true, message: "海报不能为空", trigger: "blur" },
        ],
      }
    };
  },
  created() {
    this.getListPage();
  },
  methods: {
    /** 查询产品展示类型列表 */
    getListPage() {
      this.loading = true;
      listJiayi_product_type(this.queryParams).then(response => {
        this.productTypeList = this.handleTree(response.data);
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        parentId: null,
        name: null,
        poster: null,
        remark: null,
        createBy: null,
        createTime: null
      };
      this.resetForm("form");
    },
    /** 新增按钮操作 */
    handleAdd(row) {
      this.reset();
      this.form.parentId = row ? row.id : null;
      this.open = true;
      this.title = "添加产品展示类型";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getJiayi_product_type(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改产品展示类型";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateJiayi_product_type(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getListPage();
            });
          } else {
            addJiayi_product_type(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getListPage();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm(`是否确认删除产品展示类型【${row.name}】吗？`).then(function () {
        return delJiayi_product_type(ids);
      }).then(() => {
        this.getListPage();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    //上传海报图
    handleUploadPoster(url){
      this.form.poster = url;
    },
    //选中类型
    handleChoiceType(row){
      if (row.id === this.value){
        this.$emit('input', null);
      }else {
        this.$emit('input',row.id)
      }
    },
    //判断当前选中的类型
    is_check(typeId){
      return typeId === this.value;
    }
  }
};
</script>
<style scoped>
/*滚动条整体样式*/
::-webkit-scrollbar {
  /*高宽分别对应横竖滚动条的尺寸*/
  width: 2px;
}

/*滚动条里面小方块*/
::-webkit-scrollbar-thumb {
  border-radius: 2px;
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: #F2F6FC;
}

/*滚动条里面轨道*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px #FFFFFF;
  border-radius: 10px;
  background: #FFFFFF;
}

.button_div{
  width: 45vh;
  text-align: center;
}

.el-table{
  width: 90%;
  margin: 0 auto;
}
.table-item{
  width: 50%;
  display: flex;
  flex-direction: row;
  justify-content: right;
  align-items: center;
}
.table-item_image{
  width: 2.5rem;
  height: 2.5rem;
}
.table-item_name{
  width: 70%;
  text-align: center;
}
::v-deep .el-table .el-table__expand-icon{
  font-size: 1.7rem;
  line-height: 3rem;
  height: 2rem;
}
</style>
